<template>
  <div class="sidebar">
    <ul>
      <li class="sidebar-item">
        <image-button v-ref:btn-newest id="newest" image-src='/static/images/btn_newest.png' :image-width="89" :image-height="99"></image-button>
      </li>
      <li class="sidebar-item">
        <image-button v-ref:btn-top id="top" image-src='/static/images/btn_top.png' :image-width="89" :image-height="99"></image-button>
      </li>
      <li>
        <image-button v-ref:btn-rules id="rules" image-src='/static/images/btn_rules.png' :image-width="89" :image-height="99"></image-button>
      </li>
    </ul>
  </div>
</template>

<script type="text/babel">
  import ImageButton from './ImageButton'
  import $ from 'jquery'

  export default {
    data () {
      return {
        inited: false
      }
    },
    components: {
      ImageButton
    },
    ready: function () {
      this.inited = true
      this.$refs.btnNewest.requestFocus()
    },
    events: {
      'on-view-focus': function (component) {
        var id = $(component.$el).attr('id')
        this.$dispatch('on-sidebar-item-selected', component, id)
        return true
      },
      'on-view-blur': function (component) {
        return true
      }
    }
  }
</script>

<style scoped>
  .sidebar {
  }

  .sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar ul li {
    margin: 0;
    padding: 0;
  }

  .sidebar ul li.sidebar-item {
    margin-bottom: 30px;
  }
</style>